<!DOCTYPE html>

<html>

<head>
    <meta charset="utf-8">
    <title>layuiAdmin 控制台主页一</title>
    <meta name="renderer" content="webkit">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=0">
    <link rel="stylesheet" href="../../layuiadmin/layui/css/layui.css" media="all">
    <link rel="stylesheet" href="../../layuiadmin/style/admin.css" media="all">
    <link rel="stylesheet" href="../../layuiadmin/layui/css/map.css" media="all">
    <script type="text/javascript" src='//webapi.amap.com/maps?v=1.4.6&key=9ab8eeffa6d88b5846afd39453c341b0&plugin=AMap.PlaceSearch,AMap.AdvancedInfoWindow'></script>
    <!-- UI组件库 1.0 -->
    <script src="//webapi.amap.com/ui/1.0/main.js?v=1.0.11"></script>
    <link rel="stylesheet" href="http://cache.amap.com/lbs/static/main1119.css" />
</head>
<style type="text/css">
    .layui-table-view .layui-table {
        position: relative;
        width: 100%;
        margin: 0;
        margin-top: 0px;
        margin-right: 0px;
        margin-left: 0px;
    }
    
    .info-title {
        color: white;
        font-size: 14px;
        background-color: blue;
        line-height: 26px;
        padding: 0px 0 0 6px;
        font-weight: lighter;
        letter-spacing: 1px
    }
    
    .info-content {
        padding: 4px;
        color: #666666;
        line-height: 23px;
        font: 12px Helvetica, 'Hiragino Sans GB', 'Microsoft Yahei', '微软雅黑', Arial;
    }
    
    .info-content img {
        float: left;
        margin: 3px;
    }
</style>

<body>

    <div class="layui-fluid">
        <div class="layui-row layui-col-space15">
            <div class="layui-col-md12">
                <div class="layui-row layui-col-space15">
                    <div class="layui-col-md7">
                        <div class="layui-card">
                            <div class="layui-card-header" style=" font-size: 19px">杭州市各辖区医废收集情况图（统计日期：<span class="nowdate"></span>）</div>
                            <div class="layui-card-body" style="height: 750px;">
                                <div id="container" style="height: 100%;"></div>
                            </div>
                        </div>
                    </div>
                    <div class="layui-col-md5">
                        <div class="layui-col-md12">
                            <div class="layui-carousel" id="test1" lay-filter="test1">
                                <div carousel-item="">
                                    <div class="layui-card" style="background-color: white">
                                        <div class="layui-card-header" style=" font-size: 19px">辖区每日产废量统计表（统计日期：<span class="nowdate"></span>）</div>
                                        <div class="layui-card-body  layui-text" style="height: 750px;">

                                            <div class="layui-col-xs6">
                                                <table id="hour24-1" lay-filter="test"></table>
                                            </div>
                                            <div class="layui-col-xs6">
                                                <table id="hour24-2" lay-filter="test1"></table>
                                            </div>
                                            <div id="collectcount" style="width:100%;height: 390px; margin-top: 350px;  position: absolute;"></div>
                                        </div>
                                    </div>
                                    <div class="layui-card" style="background-color: white">
                                        <div class="layui-card-header" style=" font-size: 19px">辖区本月产废量统计表（统计日期：<span class="nowmonth"></span>）</div>
                                        <div class="layui-card-body  layui-text" style="height: 324px;">

                                            <div class="layui-col-xs6">
                                                <table id="hour24-3" lay-filter="test"></table>
                                            </div>
                                            <div class="layui-col-xs6">
                                                <table id="hour24-4" lay-filter="test"></table>
                                            </div>
                                            <div id="collectcount1" style="width:687px;height: 390px; margin-top: 350px;  position: absolute;"></div>
                                        </div>
                                    </div>
                                </div>
                            </div>

                        </div>


                    </div>
                </div>
            </div>
        </div>

        <script src="../../layuiadmin/layui/layui.js?t=1"></script>
        <script src="../../layuiadmin/layui/echarts.common.min.js"></script>
        <script src="../../layuiadmin/layui/jquery-3.3.1.min.js"></script>

        <script>
            layui.config({
                base: '../../layuiadmin/' //静态资源所在路径
            }).extend({
                index: 'lib/index' //主入口模块
            }).use(['index']);
            var $ = layui.$;
            layui.use('carousel', function() {
                var carousel = layui.carousel;
                //建造实例
                carousel.render({
                    elem: '#test1',
                    width: '100%', //设置容器宽度
                    autoplay: false,
                    height: '813px',
                    arrow: 'hover', //始终显示箭头
                    indicator: 'none'
                });
            });
        </script>
        <script type="text/javascript">
            //      2 28or 29天
            var day1 = new Date();
            var s2 = day1.getFullYear() + "-" + addzreo(day1.getMonth() + 1) + "-" + addzreo(day1.getDate()); //今天
            day1.setTime(day1.getTime() - 24 * 60 * 60 * 1000);
            var mon1 = day1.getMonth() + 1;
            var yesto = day1.getDate();

            function addzreo(a) {
                if (a < 10) {
                    a = "0" + a;
                }
                return a;
            }
            var s1 = day1.getFullYear() + "-" + addzreo(day1.getMonth() + 1) + "-" + addzreo(day1.getDate()); //昨天
            $(".nowdate").html(day1.getFullYear() + "年 " + addzreo(day1.getMonth() + 1) + "月 " + addzreo(day1.getDate()) + "日");
            $(".nowmonth").html(day1.getFullYear() + "年 " + addzreo(day1.getMonth() + 1) + "月");
            var colors = [
                "#3366cc", "#dc3912", "#ff9900", "#109618", "#990099", "#0099c6", "#dd4477", "#66aa00",
                "#b82e2e", "#316395", "#994499", "#22aa99", "#aaaa11", "#6633cc", "#e67300", "#8b0707",
                "#651067", "#329262", "#5574a6", "#3b3eac"
            ];
            $.ajax({
                url: '../../../Message/regionCollect',
                type: "post",
                datatype: "json",
                success: function(res) {
                    //创建地图

                    var map = new AMap.Map('container', {
                        cursor: 'default',
                        zoom: 9,
                        mapStyle: 'amap://styles/a02e5ee9fde2d344d337ebca20b3f913'
                    });
                    AMap.plugin(['AMap.ToolBar', 'AMap.Scale'], function() {
                            map.addControl(new AMap.ToolBar());
                            map.addControl(new AMap.Scale());
                        })
                        /*   //地图热点信息
                          var placeSearch = new AMap.PlaceSearch(); //构造地点查询类
                          var infoWindow = new AMap.InfoWindow({}); //信息框
                          
                          map.on('hotspotclick', function(result) { //点击热点

                              placeSearch.getDetails(result.id, function(status, result) {
                                  if (status === 'complete' && result.info === 'OK') {
                                      placeSearch_CallBack(result);
                                  }
                              });
                          });
                          //回调函数
                          function placeSearch_CallBack(data) { //infoWindow.open(map, result.lnglat);
                              var poiArr = data.poiList.pois;
                              var location = poiArr[0].location;
                              infoWindow.setContent(createContent(poiArr[0]));
                              infoWindow.open(map, location);
                          }

                          function createContent(poi) { //信息窗体内容
                              var s = [];
                              console.log(poi);
                              s.push('<div class="info-title">' + poi.name + '</div><div class="info-content">' + "地址：" + poi.address);
                              s.push("类型：" + poi.type);
                              s.push('<div>');
                              return s.join("<br>");
                          } */
                        //just some colors


                    function getAllRings(feature) {

                        var coords = feature.geometry.coordinates,
                            rings = [];

                        for (var i = 0, len = coords.length; i < len; i++) {
                            rings.push(coords[i][0]);
                        }

                        return rings;
                    }

                    function getLongestRing(feature) {
                        var rings = getAllRings(feature);

                        rings.sort(function(a, b) {
                            return b.length - a.length;
                        });

                        return rings[0];
                    }
                    AMapUI.load(['ui/geo/DistrictExplorer', 'lib/$'], function(DistrictExplorer, $) {

                        //创建一个实例
                        var districtExplorer = window.districtExplorer = new DistrictExplorer({
                            eventSupport: true, //打开事件支持
                            isHotspot: true,
                            resizeEnable: true,
                            map: map
                        });

                        //当前聚焦的区域
                        var currentAreaNode = null;

                        //鼠标hover提示内容
                        var $tipMarkerContent = $('<div class="tipMarker bottom"></div>');
                        var tipMarker = new AMap.Marker({
                            content: $tipMarkerContent.get(0),
                            offset: new AMap.Pixel(0, 0),
                            bubble: true
                        });

                        //根据Hover状态设置相关样式
                        function toggleHoverFeature(feature, isHover, position) {

                            tipMarker.setMap(isHover ? map : null);

                            if (!feature) {
                                return;
                            }

                            var props = feature.properties;

                            if (isHover) {
                                var index = props.adcode;

                                var strHtml = '<div style="font-size:18px;font-weight:bold">' + props.name + '医废收集情况：</div><div style="font-size:15px">感染性废物：' + res.data[index].garbage + ' 箱</div><div style="font-size:15px">损伤性废物：' + res.data[index].lwq + ' 箱</div><div style="font-size:15px">病理性废物：' + res.data[index].guil + ' 箱</div><div style="font-size:15px">药物性废物：' + res.data[index].yw + ' 箱</div><div style="font-size:15px">化学性废物：' + res.data[index].hx + ' 箱</div><div style="font-size:15px">合计总箱数：' + res.data[index].total + ' 箱</div><div style="font-size:15px">合计总重量：' + (res.data[index].weight).toFixed(2) + ' 吨</div>';
                                //更新提示内容
                                $tipMarkerContent.html(strHtml);
                                //更新位置
                                tipMarker.setPosition(position || props.center);
                            }

                            $('#area-tree').find('h2[data-adcode="' + props.adcode + '"]').toggleClass('hover', isHover);

                            //更新相关多边形的样式
                            var polys = districtExplorer.findFeaturePolygonsByAdcode(props.adcode);
                            for (var i = 0, len = polys.length; i < len; i++) {

                                polys[i].setOptions({
                                    fillOpacity: isHover ? 0.5 : 0.2
                                });
                            }
                        }

                        //监听feature的hover事件
                        districtExplorer.on('featureMouseout featureMouseover', function(e, feature) {
                            toggleHoverFeature(feature, e.type === 'featureMouseover',
                                e.originalEvent ? e.originalEvent.lnglat : null);
                        });

                        //监听鼠标在feature上滑动
                        districtExplorer.on('featureMousemove', function(e, feature) {
                            //更新提示位置
                            tipMarker.setPosition(e.originalEvent.lnglat);
                        });

                        var countryCode = 100000, //全国
                            provCodes = [
                                330000, //浙江

                            ],
                            cityCodes = [

                                330100 //杭州
                            ];

                        districtExplorer.loadMultiAreaNodes(
                            //只需加载全国和市，全国的节点包含省级
                            [countryCode].concat(cityCodes),
                            function(error, areaNodes) {

                                var countryNode = areaNodes[0],
                                    cityNodes = areaNodes.slice(1);

                                var path = [];

                                //首先放置背景区域，这里是大陆的边界
                                path.push(getLongestRing(countryNode.getParentFeature()));




                                for (var i = 0, len = cityNodes.length; i < len; i++) {
                                    //逐个放置需要镂空的市级区域
                                    path.push.apply(path, getAllRings(cityNodes[i].getParentFeature()));
                                }

                                //绘制带环多边形
                                //http://lbs.amap.com/api/javascript-api/reference/overlay#Polygon
                                var polygon = new AMap.Polygon({
                                    bubble: true,
                                    lineJoin: 'round',
                                    strokeColor: 'red', //线颜色
                                    strokeOpacity: 0, //线透明度
                                    strokeWeight: 1, //线宽
                                    fillColor: 'white', //填充色
                                    fillOpacity: 0.9, //填充透明度
                                    map: map,
                                    path: path
                                });
                            });
                        var adcode = 330100;

                        districtExplorer.loadAreaNode(adcode, function(error, areaNode) {

                            //更新地图视野
                            map.setBounds(areaNode.getBounds(), null, null, true);



                            //绘制子区域
                            districtExplorer.renderSubFeatures(areaNode, function(feature, i) {

                                var fillColor = colors[i % colors.length];
                                var strokeColor = colors[colors.length - 1 - i % colors.length];

                                return {
                                    cursor: 'default',
                                    bubble: true,
                                    strokeColor: strokeColor, //线颜色
                                    strokeOpacity: 1, //线透明度
                                    strokeWeight: 1, //线宽
                                    fillColor: fillColor, //填充色
                                    fillOpacity: 0.75, //填充透明度
                                };
                            });


                        });




                        //绘制区域面板的节点
                        function renderAreaPanelNode(ele, props, color) {

                            var $box = $('<li/>').addClass('lv_' + props.level);

                            var $h2 = $('<h2/>').addClass('lv_' + props.level).attr({
                                'data-adcode': props.adcode,
                                'data-level': props.level,
                                'data-children-num': props.childrenNum || void(0),
                                'data-center': props.center.join(',')
                            }).html(props.name).appendTo($box);

                            if (color) {
                                $h2.css('borderColor', color);
                            }

                            //如果存在子节点
                            if (props.childrenNum > 0) {

                                //显示隐藏
                                $('<div class="showHideBtn"></div>').appendTo($box);

                                //子区域列表
                                $('<ul/>').addClass('sublist lv_' + props.level).appendTo($box);

                                $('<div class="clear"></div>').appendTo($box);

                                if (props.level !== 'country') {
                                    $box.addClass('hide-sub');
                                }
                            }

                            $box.appendTo(ele);
                        }


                        //填充某个节点的子区域列表
                        function renderAreaPanel(areaNode) {

                            var props = areaNode.getProps();

                            var $subBox = $('#area-tree').find('h2[data-adcode="' + props.adcode + '"]').siblings('ul.sublist');

                            if (!$subBox.length) {
                                //父节点不存在，先创建
                                renderAreaPanelNode($('#area-tree'), props);
                                $subBox = $('#area-tree').find('ul.sublist');
                            }

                            if ($subBox.attr('data-loaded') === 'rendered') {
                                return;
                            }

                            $subBox.attr('data-loaded', 'rendered');

                            var subFeatures = areaNode.getSubFeatures();

                            //填充子区域
                            for (var i = 0, len = subFeatures.length; i < len; i++) {
                                renderAreaPanelNode($subBox, areaNode.getPropsOfFeature(subFeatures[i]), colors[i % colors.length]);
                            }
                        }

                        //绘制某个区域的边界
                        function renderAreaPolygons(areaNode) {

                            //更新地图视野
                            map.setBounds(areaNode.getBounds(), null, null, true);

                            //清除已有的绘制内容
                            districtExplorer.clearFeaturePolygons();

                            //绘制子区域
                            districtExplorer.renderSubFeatures(areaNode, function(feature, i) {

                                var fillColor = colors[i % colors.length];
                                var strokeColor = colors[colors.length - 1 - i % colors.length];

                                return {
                                    cursor: 'default',
                                    bubble: true,
                                    strokeColor: strokeColor, //线颜色
                                    strokeOpacity: 1, //线透明度
                                    strokeWeight: 1, //线宽
                                    fillColor: fillColor, //填充色
                                    fillOpacity: 0.35, //填充透明度
                                };
                            });

                            //绘制父区域
                            districtExplorer.renderParentFeature(areaNode, {
                                cursor: 'default',
                                bubble: true,
                                strokeColor: 'black', //线颜色
                                strokeOpacity: 1, //线透明度
                                strokeWeight: 1, //线宽
                                fillColor: null, //填充色
                                fillOpacity: 0.35, //填充透明度
                            });
                        }

                        //切换区域后刷新显示内容
                        function refreshAreaNode(areaNode) {

                            districtExplorer.setHoverFeature(null);

                            renderAreaPolygons(areaNode);

                            //更新选中节点的class
                            var $nodeEles = $('#area-tree').find('h2');

                            $nodeEles.removeClass('selected');

                            var $selectedNode = $nodeEles.filter('h2[data-adcode=' + areaNode.getAdcode() + ']').addClass('selected');

                            //展开下层节点
                            $selectedNode.closest('li').removeClass('hide-sub');

                            //折叠下层的子节点
                            $selectedNode.siblings('ul.sublist').children().addClass('hide-sub');
                        }

                        //切换区域
                        function switch2AreaNode(adcode, callback) {

                            if (currentAreaNode && ('' + currentAreaNode.getAdcode() === '' + adcode)) {
                                return;
                            }

                            loadAreaNode(adcode, function(error, areaNode) {

                                if (error) {

                                    if (callback) {
                                        callback(error);
                                    }

                                    return;
                                }

                                currentAreaNode = window.currentAreaNode = areaNode;

                                //设置当前使用的定位用节点
                                districtExplorer.setAreaNodesForLocating([currentAreaNode]);

                                refreshAreaNode(areaNode);

                                if (callback) {
                                    callback(null, areaNode);
                                }
                            });
                        }

                        //加载区域
                        function loadAreaNode(adcode, callback) {

                            districtExplorer.loadAreaNode(adcode, function(error, areaNode) {

                                if (error) {

                                    if (callback) {
                                        callback(error);
                                    }

                                    console.error(error);

                                    return;
                                }

                                renderAreaPanel(areaNode);

                                if (callback) {
                                    callback(null, areaNode);
                                }
                            });
                        }

                        $('#area-tree').on('mouseenter mouseleave', 'h2[data-adcode]', function(e) {

                            if (e.type === 'mouseleave') {
                                districtExplorer.setHoverFeature(null);
                                return;
                            }

                            var adcode = $(this).attr('data-adcode');

                            districtExplorer.setHoverFeature(currentAreaNode.getSubFeatureByAdcode(adcode));
                        });


                        $('#area-tree').on('click', 'h2[data-children-num]', function() {

                            var adcode = $(this).attr('data-adcode');

                            switch2AreaNode(adcode);
                        });

                        $('#area-tree').on('click', '.showHideBtn', function() {

                            var $li = $(this).closest('li');

                            $li.toggleClass('hide-sub');

                            if (!$li.hasClass('hide-sub')) {

                                //子节点列表被展开
                                var $subList = $li.children('ul.sublist');

                                //尚未加载
                                if (!$subList.attr('data-loaded')) {

                                    $subList.attr('data-loaded', 'loading');

                                    $li.addClass('loading');

                                    //加载
                                    loadAreaNode($li.children('h2').attr('data-adcode'), function() {

                                        $li.removeClass('loading');
                                    });
                                }
                            }
                        });

                        //杭州
                        switch2AreaNode(330100);
                    });
                    var json1 = [];
                    var json2 = [];
                    json1.push({
                        "area": "上城区",
                        "number": res.data[330102].total,
                        "weight": res.data[330102].weight
                    });
                    json1.push({
                        "area": "下城区",
                        "number": res.data[330103].total,
                        "weight": res.data[330103].weight
                    });
                    json1.push({
                        "area": "江干区",
                        "number": res.data[330104].total,
                        "weight": res.data[330104].weight
                    });
                    json1.push({
                        "area": "拱墅区",
                        "number": res.data[330105].total,
                        "weight": res.data[330105].weight
                    });
                    json1.push({
                        "area": "西湖区",
                        "number": res.data[330106].total,
                        "weight": res.data[330106].weight
                    });
                    json1.push({
                        "area": "滨江区",
                        "number": res.data[330108].total,
                        "weight": res.data[330108].weight
                    });
                    json1.push({
                        "area": "萧山区",
                        "number": res.data[330109].total,
                        "weight": res.data[330109].weight
                    });
                    json2.push({
                        "area": "余杭区",
                        "number": res.data[330110].total,
                        "weight": res.data[330110].weight
                    });
                    json2.push({
                        "area": "富阳区",
                        "number": res.data[330111].total,
                        "weight": res.data[330111].weight
                    });
                    json2.push({
                        "area": "桐庐县",
                        "number": res.data[330122].total,
                        "weight": res.data[330122].weight
                    });
                    json2.push({
                        "area": "淳安县",
                        "number": res.data[330127].total,
                        "weight": res.data[330127].weight
                    });
                    json2.push({
                        "area": "建德市",
                        "number": res.data[330182].total,
                        "weight": res.data[330182].weight
                    });
                    json2.push({
                        "area": "临安区",
                        "number": res.data[330185].total,
                        "weight": res.data[330185].weight
                    });
                    json2.push({
                        "area": "辖区总计",
                        "number": parseInt(res.data[330102].total) + parseInt(res.data[330103].total) + parseInt(res.data[330104].total) + parseInt(res.data[330105].total) + parseInt(res.data[330106].total) + parseInt(res.data[330108].total) + parseInt(res.data[330109].total) + parseInt(res.data[330110].total) + parseInt(res.data[330111].total) + parseInt(res.data[330122].total) + parseInt(res.data[330127].total) + parseInt(res.data[330182].total) + parseInt(res.data[330185].total),
                        "weight": parseFloat(res.data[330102].weight) + parseFloat(res.data[330103].weight) + parseFloat(res.data[330104].weight) + parseFloat(res.data[330105].weight) + parseFloat(res.data[330106].weight) + parseFloat(res.data[330108].weight) + parseFloat(res.data[330109].weight) + parseFloat(res.data[330110].weight) + parseFloat(res.data[330111].weight) + parseFloat(res.data[330122].weight) + parseFloat(res.data[330127].weight) + parseFloat(res.data[330182].weight) + parseFloat(res.data[330185].weight),
                    });
                    layui.use('table', function() {
                        var table = layui.table;
                        var $ = layui.$;
                        table.render({
                            elem: '#hour24-1',
                            height: 'full',
                            data: json1,
                            limit: 7,
                            cols: [
                                [
                                    //表头
                                    {
                                        field: 'area',
                                        title: '行政区划',
                                        width: '33%',
                                        align: 'center',
                                        style: 'height:1px;'

                                    }, {
                                        field: 'number',
                                        title: '数量（箱）',
                                        width: '33%',
                                        align: 'center'

                                    }, {
                                        field: 'weight',
                                        title: '重量（吨）',
                                        width: '33%',
                                        align: 'center',
                                        templet: function(d) {
                                            return d.weight.toFixed(2)
                                        }

                                    }
                                ]
                            ],
                            skin: 'row' //表格风格
                                ,
                            even: true
                        });
                        $("table th").css({
                            "background": "#1E9FFF",
                            "color": "white"
                        });
                    });
                    layui.use('table', function() {
                        var table = layui.table;
                        var $ = layui.$;
                        table.render({
                            elem: '#hour24-2',
                            height: 'full',
                            data: json2,
                            limit: 7,
                            cols: [
                                [
                                    //表头
                                    {
                                        field: 'area',
                                        title: '行政区划',
                                        width: '33%',
                                        align: 'center'

                                    }, {
                                        field: 'number',
                                        title: '数量（箱）',
                                        width: '33%',
                                        align: 'center'

                                    }, {
                                        field: 'weight',
                                        title: '重量（吨）',
                                        width: '33%',
                                        align: 'center',
                                        templet: function(d) {
                                            return d.weight.toFixed(2)
                                        }

                                    }
                                ]
                            ],
                            skin: 'row' //表格风格
                                ,
                            even: true
                        });
                        $("table th").css({
                            "background": "#1E9FFF",
                            "color": "white"
                        });
                    })

                    var json3 = [];
                    json3.push({
                        "name": "上城区",
                        "value": res.data[330102].total
                    });
                    json3.push({
                        "name": "下城区",
                        "value": res.data[330103].total

                    });
                    json3.push({
                        "name": "江干区",
                        "value": res.data[330104].total,
                        "weight": res.data[330104].weight
                    });
                    json3.push({
                        "name": "拱墅区",
                        "value": res.data[330105].total
                    });
                    json3.push({
                        "name": "西湖区",
                        "value": res.data[330106].total
                    });
                    json3.push({
                        "name": "滨江区",
                        "value": res.data[330108].total
                    });
                    json3.push({
                        "name": "萧山区",
                        "value": res.data[330109].total
                    });
                    json3.push({

                        "name": "余杭区",
                        "value": res.data[330110].total
                    });
                    json3.push({
                        "name": "富阳区",
                        "value": res.data[330111].total
                    });
                    json3.push({
                        "name": "桐庐县",
                        "value": res.data[330122].total
                    });
                    json3.push({
                        "name": "淳安县",
                        "value": res.data[330127].total
                    });
                    json3.push({
                        "name": "建德市",
                        "value": res.data[330182].total
                    });
                    json3.push({
                        "name": "临安区",
                        "value": res.data[330185].total
                    });
                    var mychart = echarts.init($("#collectcount")[0]);
                    var option = {
                        color: colors,
                        title: {
                            text: '各辖区昨日产废量分布图',

                            x: 'left'
                        },
                        tooltip: {
                            trigger: 'item',
                            formatter: "{a} <br/>{b} : {c} 箱 (占比：{d}%)"
                        },
                        legend: {
                            orient: 'vertical',
                            left: 'left',
                            top: 'middle',
                            data: ['上城区', '下城区', '江干区', '拱墅区', '西湖区', '滨江区', '萧山区', '余杭区', '富阳区', '桐庐县', '淳安县', '建德市', '临安区']
                        },
                        series: [{
                            name: '产废量收集情况',
                            type: 'pie',
                            radius: '80%',
                            center: ['60%', '50%'],
                            data: json3,
                            selectedMode: 'single',
                            itemStyle: {
                                emphasis: {
                                    shadowBlur: 10,
                                    shadowOffsetX: 0,
                                    shadowColor: 'rgba(0, 0, 0, 0.5)'
                                }
                            }
                        }]
                    };
                    mychart.setOption(option);
                }
            });
            $.ajax({
                url: '../../../Message/regionCollect',
                type: "post",
                datatype: "json",
                data: {
                    month: s2
                },
                success: function(res) {
                    var json4 = [];
                    var json5 = [];
                    json4.push({
                        "area": "上城区",
                        "number": res.data[330102].total,
                        "weight": res.data[330102].weight
                    });
                    json4.push({
                        "area": "下城区",
                        "number": res.data[330103].total,
                        "weight": res.data[330103].weight
                    });
                    json4.push({
                        "area": "江干区",
                        "number": res.data[330104].total,
                        "weight": res.data[330104].weight
                    });
                    json4.push({
                        "area": "拱墅区",
                        "number": res.data[330105].total,
                        "weight": res.data[330105].weight
                    });
                    json4.push({
                        "area": "西湖区",
                        "number": res.data[330106].total,
                        "weight": res.data[330106].weight
                    });
                    json4.push({
                        "area": "滨江区",
                        "number": res.data[330108].total,
                        "weight": res.data[330108].weight
                    });
                    json4.push({
                        "area": "萧山区",
                        "number": res.data[330109].total,
                        "weight": res.data[330109].weight
                    });
                    json5.push({
                        "area": "余杭区",
                        "number": res.data[330110].total,
                        "weight": res.data[330110].weight
                    });
                    json5.push({
                        "area": "富阳区",
                        "number": res.data[330111].total,
                        "weight": res.data[330111].weight
                    });
                    json5.push({
                        "area": "桐庐县",
                        "number": res.data[330122].total,
                        "weight": res.data[330122].weight
                    });
                    json5.push({
                        "area": "淳安县",
                        "number": res.data[330127].total,
                        "weight": res.data[330127].weight
                    });
                    json5.push({
                        "area": "建德市",
                        "number": res.data[330182].total,
                        "weight": res.data[330182].weight
                    });
                    json5.push({
                        "area": "临安区",
                        "number": res.data[330185].total,
                        "weight": res.data[330185].weight
                    });
                    json5.push({
                        "area": "辖区总计",
                        "number": parseInt(res.data[330102].total) + parseInt(res.data[330103].total) + parseInt(res.data[330104].total) + parseInt(res.data[330105].total) + parseInt(res.data[330106].total) + parseInt(res.data[330108].total) + parseInt(res.data[330109].total) + parseInt(res.data[330110].total) + parseInt(res.data[330111].total) + parseInt(res.data[330122].total) + parseInt(res.data[330127].total) + parseInt(res.data[330182].total) + parseInt(res.data[330185].total),
                        "weight": parseFloat(res.data[330102].weight) + parseFloat(res.data[330103].weight) + parseFloat(res.data[330104].weight) + parseFloat(res.data[330105].weight) + parseFloat(res.data[330106].weight) + parseFloat(res.data[330108].weight) + parseFloat(res.data[330109].weight) + parseFloat(res.data[330110].weight) + parseFloat(res.data[330111].weight) + parseFloat(res.data[330122].weight) + parseFloat(res.data[330127].weight) + parseFloat(res.data[330182].weight) + parseFloat(res.data[330185].weight),
                    });
                    var json6 = [];
                    json6.push({
                        "name": "上城区",
                        "value": res.data[330102].total
                    });
                    json6.push({
                        "name": "下城区",
                        "value": res.data[330103].total

                    });
                    json6.push({
                        "name": "江干区",
                        "value": res.data[330104].total,
                        "weight": res.data[330104].weight
                    });
                    json6.push({
                        "name": "拱墅区",
                        "value": res.data[330105].total
                    });
                    json6.push({
                        "name": "西湖区",
                        "value": res.data[330106].total
                    });
                    json6.push({
                        "name": "滨江区",
                        "value": res.data[330108].total
                    });
                    json6.push({
                        "name": "萧山区",
                        "value": res.data[330109].total
                    });
                    json6.push({

                        "name": "余杭区",
                        "value": res.data[330110].total
                    });
                    json6.push({
                        "name": "富阳区",
                        "value": res.data[330111].total
                    });
                    json6.push({
                        "name": "桐庐县",
                        "value": res.data[330122].total
                    });
                    json6.push({
                        "name": "淳安县",
                        "value": res.data[330127].total
                    });
                    json6.push({
                        "name": "建德市",
                        "value": res.data[330182].total
                    });
                    json6.push({
                        "name": "临安区",
                        "value": res.data[330185].total
                    });
                    var mychart1 = echarts.init($("#collectcount1")[0]);
                    var option1 = {
                        color: colors,
                        title: {
                            text: '各辖区本月产废量分布图',

                            x: 'left'
                        },
                        tooltip: {
                            trigger: 'item',
                            formatter: "{a} <br/>{b} : {c} 箱 (占比：{d}%)"
                        },
                        legend: {
                            orient: 'vertical',
                            left: 'left',
                            top: 'middle',
                            data: ['上城区', '下城区', '江干区', '拱墅区', '西湖区', '滨江区', '萧山区', '余杭区', '富阳区', '桐庐县', '淳安县', '建德市', '临安区']
                        },
                        series: [{
                            name: '产废量收集情况',
                            type: 'pie',
                            radius: '80%',
                            center: ['60%', '50%'],
                            data: json6,
                            selectedMode: 'single',
                            itemStyle: {
                                emphasis: {
                                    shadowBlur: 10,
                                    shadowOffsetX: 0,
                                    shadowColor: 'rgba(0, 0, 0, 0.5)'
                                }
                            }
                        }]
                    };
                    mychart1.setOption(option1);
                    layui.use('table', function() {
                        var table = layui.table;
                        var $ = layui.$;
                        table.render({
                            elem: '#hour24-3',
                            height: 'full',
                            data: json4,
                            limit: 7,
                            cols: [
                                [
                                    //表头
                                    {
                                        field: 'area',
                                        title: '行政区划',
                                        width: '33%',
                                        align: 'center',
                                        style: 'height:1px;'

                                    }, {
                                        field: 'number',
                                        title: '数量（箱）',
                                        width: '33%',
                                        align: 'center'

                                    }, {
                                        field: 'weight',
                                        title: '重量（吨）',
                                        width: '33%',
                                        align: 'center',
                                        templet: function(d) {
                                            return d.weight.toFixed(2)
                                        }

                                    }
                                ]
                            ],
                            skin: 'row' //表格风格
                                ,
                            even: true
                        });
                        $("table th").css({
                            "background": "#1E9FFF",
                            "color": "white"
                        });
                    });
                    layui.use('table', function() {
                        var table = layui.table;
                        var $ = layui.$;
                        table.render({
                            elem: '#hour24-4',
                            height: 'full',
                            data: json5,
                            limit: 7,
                            cols: [
                                [
                                    //表头
                                    {
                                        field: 'area',
                                        title: '行政区划',
                                        width: '33%',
                                        align: 'center'

                                    }, {
                                        field: 'number',
                                        title: '数量（箱）',
                                        width: '33%',
                                        align: 'center'

                                    }, {
                                        field: 'weight',
                                        title: '重量（吨）',
                                        width: '33%',
                                        align: 'center',
                                        templet: function(d) {
                                            return d.weight.toFixed(2)
                                        }

                                    }
                                ]
                            ],
                            skin: 'row' //表格风格
                                ,
                            even: true
                        });
                        $("table th").css({
                            "background": "#1E9FFF",
                            "color": "white"
                        });
                    })
                }

            })
        </script>
</body>

</html>